<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2025/9/12
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品列表</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("li").mouseover(function (event) {
                $("#d").show();
                // $.get("${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),
                // function(result){
                //     console.log(result)
                // },"json");// 参数第四个参数设置为json时,会自动将响应数据转换成JSON对象
                <%--$.post("${pageContext.request.contextPath}/findById.product",--%>
                <%--    {"id": $(this).attr("data-id")},--%>
                <%--    function (product) {--%>
                <%--        $("#d").css("left",event.clientX);--%>
                <%--        $("#d").css("top",event.clientY);--%>
                <%--        $("#s1").html(product.id);--%>
                <%--        $("#s2").html(product.name);--%>
                <%--        $("#s3").html(product.price);--%>
                <%--    }, "json");--%>

                // getJSON
                <%--$.getJSON("${pageContext.request.contextPath}/findById.product",--%>
                <%--    {"id": $(this).attr("data-id")},--%>
                <%--    function (product) {--%>
                //         $("#d").css("left",event.clientX);
                //         $("#d").css("top",event.clientY);
                //         $("#s1").html(product.id);
                //         $("#s2").html(product.name);
                //         $("#s3").html(product.price);
                <%--    })--%>

                // ajax方法是通过一系列选项来操作的
                // 每一组选项都是一个键值对的格式,通过key指定当前是什么选项
                // 这样可以提高可读性
                $.ajax({
                    type: "post",   // 默认get
                    url: "${pageContext.request.contextPath}/findById.product",
                    data: {"id": $(this).attr("data-id")},
                    dataType: "json",   // 默认text,表示返回普通字符串
                    success: function (product) { // 相当于满足xhr.readyState==4&&xhr.status==200
                        console.log(product)
                        $("#d").css("left", event.clientX);
                        $("#d").css("top", event.clientY);
                        $("#s1").html(product.id);
                        $("#s2").html(product.name);
                        $("#s3").html(product.price);
                    },
                    error: function (result) {
                        // 相当于不满足xhr.readyState==4&&xhr.status==200条件
                    }
                })
            });

            $("li").mouseout(function () {
                $("#d").hide();
            });
        })
    </script>
</head>
<body>
<!--
    需求一:查询所有商品信息
    此处使用传统的web请求方式进行查询
    将数据库中所有商品的名称展示到列表中
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li data-id="${product.id}">${product.name}</li>
    </c:forEach>
</ul>
<hr>
<!--
    需求二:展示商品详情
    初始情况下,下面的div是隐藏的
    当用户鼠标悬停在某一个商品名称上的时候
        进入数据库根据商品编号查询该商品的详细信息,在div中展示出来
        在后端Java中查询出来的是一个Java对象,将其改造成JSON格式的字符串返回到js中
        在js中通过eval方法将其转换成JSON对象
        且此时的div会在鼠标指针边上展示
    当鼠标离开商品区域,则div隐藏起来
-->
<div id="d" style="background-color: #dddddd;padding: 10px;width: 260px;display: none;position: absolute;">
    商品编号:<span id="s1">1</span><br>
    商品名称:<span id="s2">aaa</span><br>
    商品单价:<span id="s3">10.0</span><br>
</div>
</body>
</html>
